<script lang="ts" setup>
import { computed } from "vue";
const emit = defineEmits(["click"]);

const props = defineProps({
  label: String,
  labelStyle: {
    type: Object,
    default: () => {},
  },
  desc: String,
  to: String,
  max_width: {
    type: String,
    default: "200px",
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});
const formattedLabel = computed(() => props.label ?? "-");
// const formattedDesc = computed(() =>
//   Array.isArray(props.desc) ? props.desc?.join("/") : props?.desc || null
// );
const formattedDesc = computed(() => props.desc);
const isLabelLong = computed(() => formattedLabel.value?.length < 23);
</script>

<template>
  <ga-comment>
    <template #author>
      <div v-if="to">
        <router-link :to="to" v-if="isLabelLong" class="router-link" :style="labelStyle">
          <p class="ga_comment" :style="{ maxWidth: max_width }">
            {{ formattedLabel || "-" }}
          </p>
        </router-link>
        <ga-tooltip :content="formattedLabel" v-else>
          <router-link :to="to" class="router-link" :style="labelStyle">
            <p class="ga_comment" :style="{ maxWidth: max_width }">
              {{ formattedLabel || "-" }}
            </p>
          </router-link>
        </ga-tooltip>
      </div>
      <div v-else>
        <p
          class="comment-label ga_comment"
          v-if="isLabelLong"
          @click="$emit('click')"
          :style="{ maxWidth: max_width, ...labelStyle }"
        >
          {{ formattedLabel || "-" }}
        </p>
        <ga-tooltip :content="formattedLabel" v-else>
          <p
            class="comment-label ga_comment"
            :style="{ maxWidth: max_width, ...labelStyle }"
            @click="$emit('click')"
          >
            {{ formattedLabel || "-" }}
          </p>
        </ga-tooltip>
      </div>
    </template>
    <template #avatar>
      <slot name="avatar"></slot>
    </template>
    <template #content v-if="formattedDesc || isEdit">
      <p class="comment-desc text_overflow">
        <!-- {{ Array.isArray(desc) ? desc.join("/") : desc || "-" }} -->
        {{ formattedDesc || "-" }}
        <ga-link v-if="isEdit" :hoverable="false">
          <icon-edit class="icon_edit" @click="$emit('handleEditDesc', formattedDesc)" />
        </ga-link>
      </p>
    </template>
  </ga-comment>
</template>

<style scoped lang="scss">
.ga_comment {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.garco-comment-title.garco-comment-title-align-left) {
  line-height: 18px;
  height: 18px;
}
.router-link {
  cursor: pointer;
  color: #0f5ef7;
}
.comment-desc {
  font-size: 12px;
  font-weight: 400;
  display: flex;
  line-height: 22px;
  color: rgba(44, 64, 104, 0.6);
}
.icon_edit {
  margin-left: 4px;
  opacity: 0;
}
:deep(.garco-comment-avatar) {
  margin-right: 0;
}
:deep(.garco-comment-inner-content) {
  &:hover {
    .icon_edit {
      opacity: 1;
    }
  }
}
</style>
